<template>
    <div>
        <Form ref="EditForm" :model="formData" label-position="right" :label-width="150">
            <Row :gutter="16">

                <Col :xs="24" :md="24">
                    <FormItem label="站点名称" prop="siteName" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.siteName"></Input>
                        <div style="color:#c0c0c0">网站名称显示于标题栏，前端变量名为：cms.siteInfo.siteName</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="使用的模版目录" prop="siteTemplate" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <FileSelect v-model="formData.siteTemplate" :isCurDir="true" placeholder="选择模版目录" path="/areas/home/static/template" split="/"></FileSelect>
                        <div style="color:#c0c0c0">当前网站使用的模版目录。前端变量名为：cms.siteInfo.siteTemplate</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="网站网址" prop="siteUrl" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.siteUrl"></Input>
                        <div style="color:#c0c0c0"> 前端变量名为：cms.siteInfo.siteUrl</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="网站关键词" prop="siteKeyWord" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.siteKeyWord"></Input>
                        <div style="color:#c0c0c0">用于网站首页，多个关键词请用空格隔开，建议3到4个关键词。前端变量名为：cms.siteInfo.siteKeyWord</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="网站描述" prop="siteRemark" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.siteRemark"></Input>
                        <div style="color:#c0c0c0">网站描述，一般显示在搜索引擎搜索结果中的描述文字，用于介绍网站，吸引浏览者点击。前端变量名为：cms.siteInfo.siteRemark</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="版权信息" prop="copyRight" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.copyRight"></Input>
                        <div style="color:#c0c0c0">前端变量名为：cms.siteInfo.copyRight</div>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="站点Logo" prop="logoPath" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <ImageSelect path="/areas/home/static">
                            <div class="logoDiv"></div>
                        </ImageSelect>
                        <div style="color:#c0c0c0">前端变量名为：cms.siteInfo.logoPath</div>
                    </FormItem>
                </Col>



            </Row>
            <Row>
                <Col>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit()">提交</Button>
                        <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Col>
            </Row>


        </Form>


    </div>
</template>

<script>

    import AppFrame from '../../../libs/app-frame';
    import FileSelect from '../../../components/file-select';
    import ImageSelect from '../../../components/image-select';
    export default {
        components:{
            FileSelect,
            ImageSelect
        },
        data: function() {
            return {
                state: { //数据加载状态
                    isLoadingData: false,
                    isChangeData: false
                },

                formData: {
                    siteName:'',
                    siteTemplate:''
                },
                query: {}
            }
        },
        created: function() {
            this.query = this.$route.query;
            this.getFormData();
        },
        methods: {
            getFormData() {
                let self = this;
                self.state.isLoadingData = true;
                let postData = {
                    label: '_site-info',
                };
                AppFrame.Http.Post("/manage-api/cms/setting/getInfo", postData).then(function(Ret) {
                    if (Ret.Result === 1 && Ret.Data) {
                        self.formData=Ret.Data;
                    }
                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                });
            },
            handleSubmit() {
                let self = this;
                this.$refs["EditForm"].validate((valid) => {

                    if (valid) {
                        let postData={
                            label:'_site-info',
                            model:JSON.stringify(self.formData)
                        };

                        AppFrame.Http.Post("/manage-api/cms/setting/setInfo", postData, function(err, ret) {
                            if (ret && ret.Result === 1) {
                                self.$Message.success('保存成功');

                            } else {
                                self.$Message.error(ret.Msg);
                            }
                        })
                    }
                });
            },
            handleReset() {
                this.$refs["EditForm"].resetFields();
            },
        }
    }
</script>

<style scoped>
.logoDiv{background-color: #ccc;width: 200px;max-width: 300px; border:1px solid #ddd;min-height: 100px;cursor: pointer}
</style>
